<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>富文本编辑器</title>
    <style>
        body,html{
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
            height: 100%;
        }
        .container{
            width: 100%;
            overflow: hidden;
            position: relative;
            height: 100%;
        }
        .edit{
            width: 90%;
            min-height: 300px;
            max-height: 600px;
            overflow-y: scroll;
            position: absolute;
            margin-left: 2%;
            padding:3%;
            margin-top: 60px;
            border: 1px solid gray;
        }
        .edit>h1,h2{
            width: 100%;
            text-align: center
        }
        .edit>h3,h4,h5{
            
        }

        .edit::-webkit-scrollbar{
            width: 0;
        }
        .tools{
            position: absolute;
            width: 95%;
            margin-left: 2.5%;
            margin-top: 5px;
            height: auto;
            display: flex;
            flex-direction: row;
        }
        .tools>div{
            height: 25px;
            width: 25px;
            border: 1px solid gray;
            line-height: 25px;
            cursor: pointer;
            padding: 10px;
        }
        .submit{
            position: absolute;
            top: 700px;
            width: 100px;
            height: 40px;
        }
        .edit>div{
            color: rgb(9, 255, 0);
            background-color: rgb(30, 30, 30);
            font-family: Consolas, "Courier New", monospace;
            font-size: 14px;
            line-height: 19px;
            white-space: pre;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="edit" contenteditable></div>
        <div class="tools">
            <div>h1</div>
            <div>h2</div>
            <div>h3</div>
            <div>h4</div>
            <div>h5</div>
            <div>p</div>
            <div>img</div>
            <div>div</div>
        </div>
        <div class="submit">提交</div>
    </div>
    <script>
        (function(d,w){
            w.onload = (e)=>{
                let children = d.getElementsByClassName('tools')[0].children;
                let edit = d.getElementsByClassName('edit')[0];
                let submit = d.getElementsByClassName('submit')[0];
                for(let i = 0; i < children.length; i++) {
                    children[i].addEventListener('click',(e)=>{
                        console.log(e.target.innerHTML)
                        let type = e.target.innerHTML;
                        let node = d.createElement(e.target.innerHTML);
                        if(type == 'img') {
                            node.src = "https://i.loli.net/2020/12/22/xhNpR7dQnDTg8Ll.png" ;
                            node.style.width = '20%';
                            node.style.marginLeft = '40%';
                        }else{
                            node.innerHTML = `编写${type}`;
                        }
                        edit.append(node);
                    })
                }
                submit.addEventListener('click', (e)=>{
                    console.log(edit.innerHTML)
                })
                edit.addEventListener('keydown', (e)=>{
                    console.log(e.keyCode, e.ctrlKey);
                    if(e.ctrlKey && e.keyCode == 83){
                        e.preventDefault();
                    }
                })
            }
        })(document,window)
    </script>
</body>
</html>